<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" id="user">
            <span id="userTips"></span>
        </div>
        <div class="input-group">
            <button id="btn">点击</button>
        </div>
    </div>
</body>
<script>
    // 用户名要求: 由数字 字母 下换线 组成, 6-12位,且不能以数字开头

    // 按照从易到难顺序验证:
    // a. 6-12位
    // b. 不能以数字开头
    // c. 由数字 字母 下换线 组成 -> 所有的字符都要在这个范围中(合法字符) 在这个范围以外(非法字符)

    // (1) 获取元素 绑定事件 -> 取值
    var userInp = document.getElementById("user");
    var userTips = document.getElementById("userTips");
    var btn = document.getElementById("btn");

    // 创建一个数组包含所有合法的
    // 合法的编码范围:
    // 数字: 48 - 57    charCode >= 48 && charCode <= 57
    // 大写: 65 - 90    charCode >= 65 && charCode <= 90
    // 小写: 97 - 122   charCode >= 97 && charCode <= 122
    // 下划线: 95       charCode == 95

    // 根据编码范围生成字符 放到数组中
    var numList = [];
    for (var i = 48; i <= 57; i++) {
        var char = String.fromCharCode(i);
        numList.push(char);
    }
    console.log(numList);

    var bigList = [];
    for (var i = 65; i <= 90; i++) {
        var char = String.fromCharCode(i);
        bigList.push(char);
    }
    console.log(bigList);

    var smallList = [];
    for (var i = 97; i <= 122; i++) {
        var char = String.fromCharCode(i);
        smallList.push(char);
    }
    console.log(smallList);

    var speList = ["_"]; //允许使用的特殊字符

    var normalList = numList.concat(bigList, smallList, speList);
    console.log(normalList);



    btn.onclick = function () {
        var user = userInp.value;// '123123'
        console.log(user);
        //a. 长度6-12位 
        if (user.length >= 6 && user.length <= 12) {
            console.log("len ok!");

            // b. 不能以数字开头
            var firstChar = user.charAt(0);
            // isNaN()  传入一个参数判断是否是非数字(NaN)  是非数字返回true 数字-> false  (如果传入的参数不是number 隐式转number在判断)
            // isNaN("a"); // 'a' -> NaN -> true
            // isNaN("1"); // '1' -> 1 -> false
            if (isNaN(firstChar)) { // true-> 非数字
                console.log("非数字开头");

                // c. 由数字 字母 下换线 组成 -> 所有的字符都要在这个范围中(合法字符) 在这个范围以外(非法字符)
                var flag = true; // 假设都是合法字符 (找到一个非法的即可推翻假设)

                for (var i = 0; i < user.length; i++) {
                    var char = user.charAt(i); //对应下标的字符
                    if (normalList.indexOf(char) == -1) { //找到一个非法的  normalList中没有
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    userTips.innerText = "√";
                    userTips.style.fontSize = "12px";
                    userTips.style.color = "green";
                } else {
                    userTips.innerText = "用户名由数字,字母,下划线组成!";
                    userTips.style.fontSize = "12px";
                    userTips.style.color = "red";
                }

            } else { //数字
                userTips.innerText = "用户名不能以数字开头!";
                userTips.style.fontSize = "12px";
                userTips.style.color = "red";
            }

        } else {
            userTips.innerText = "用户名需要在6-12位之间!";
            userTips.style.fontSize = "12px";
            userTips.style.color = "red";
        }

    }



</script>

</html>